<template>
  <div class="homepage">
    <!-- banner  暂定高230  宽100% -->
    <van-swipe :autoplay="3000" indicator-color="white" class="banner">
      <van-swipe-item
        v-for="(banner, index) in homepiclist"
        :key="index"
        style="height: 150px; text-align: center"
      >
        <img :src="banner" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 免费为我报价 -->

    <div class="offer" v-show="offshow" @touchmove.prevent>
      <ul>
        <li style="width: 100%">
          <span style="text-align: right; width: 65%; display: inline-block">
            免费为我报价 </span
          ><span
            @click="showfreey"
            style="
              text-align: right;
              width: 35%;
              display: inline-block;
              padding-right: 1rem;
              color: #a8a89e;
            "
            >x</span
          >
        </li>
        <li>
          <p>限时免费</p>
          <p>
            免费上门量房，计算墙面积、顶面面积、地面面积，并根据结果免费设计装修方案
          </p>
        </li>
        <li><p>稍后装修公司将会电话联系你，沟通具体的装修服务流程</p></li>
        <li>
          <input
            type="number"
            v-model="callpnone"
            placeholder="请输入你的手机号码用于接收通知"
            pattern="[0-9]*"
            @keyup="onchagn()"
            @blur="onscoll()"
          />
        </li>
        <li>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              width: 65%;
              margin: auto;
            "
          >
            <p style="width: 60%; text-align: left">
              <input
                type="number"
                placeholder="请输入验证码"
                pattern="[0-9]*"
                style="width: 90%"
                @blur="onscoll()"
                @keyup="onchagn()"
                v-model="identifying"
              />
            </p>
            <p
              ref="change"
              @click="eventBtn && secode()"
              style="
                width: 40%;
                padding: 0 0.2rem;
                text-align: center;
                color: #fff;
                height: 2.4rem;
                line-height: 2.4rem;
              "
            >
              发送验证码
            </p>
          </div>
        </li>
        <li @click="sumitoff()"><p ref="changsum">立即预约</p></li>
        <li>
          <p>
            <input type="checkbox" id="checkred" checked="checked" />
            <label for="checkred"></label> <span> 我已阅读并同意</span>
            <span @click="$router.push('/renovation/note')">《服务须知》</span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 遮罩层 -->
    <div
      v-show="offshow"
      style="
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        z-index: 10;
        top: 0;
      "
      @click="offershow()"
      @touchmove.prevent
    ></div>
    <!-- 公司介绍模块 -->
    <div
      style="
        width: 100%;
        padding: 0.5rem 0;
        position: relative;
        background: white;
      "
    >
      <div
        class="titlist"
        style="font-size: 1rem; font-weight: bold; letter-spacing: 1px"
      >
        {{ homepagelist.name }}
      </div>

      <div>
        <!-- <van-icon name="star" color="#FC4614" />
        <van-icon name="star" color="#FC4614" />
        <van-icon name="star" color="#FC4614" /><span> 14条 </span> -->
      </div>

      <div style="">
        <!-- <van-icon name="good-job-o" color="#1E1E1E" size="18" style="" />
        <span
          class="better"
          style="font-size: 0.75rem; top: 38%; color: #5d5c61"
        >
          点评 （ 设计：<span>50</span> &nbsp;施工：<span>50</span>&nbsp;服务:
          <span>5.0</span> ）</span
        > -->
      </div>
      <!-- <div
        class="titlist betterrow"
        style="border-bottom: 1px solid rgba(0, 0, 0, 0.1)"
        @click="tocomp(`${homepagelist.decorationCompanyId}`)"
      > -->
      <!-- <van-icon name="hotel-o" size="18" color="#5d5c61" />
        <span class="better" style=""> 公司介绍</span> -->
      <!-- </div> -->
      <div
        class="titlist betterrow"
        style="border-bottom: 1px solid rgba(0, 0, 0, 0.1)"
        @click="openBaiApp()"
      >
        <van-icon name="location-o" color="#5d5c61" size="18" style="" />
        <span class="better" style=""> 地图显示</span>
      </div>
      <div class="titlist" style="" @click="callphone()">
        <van-icon name="phone-o" color="#5d5c61" size="18" style="" />
        <span class="better" style="top: 70.5%">
          {{ mobile }}
          <span style="">（可直接拨打电话）</span>
        </span>
      </div>
    </div>

    <!-- 装修模块 -->
    <div
      style="
        width: 100%;
        background: white;
        margin-top: 1rem;
        padding-bottom: 1rem;
      "
    >
      <van-row class="titall">
        <van-col class="titlering">
          <div>
            <span style="margin-bottom: 10px">装修案例</span>
          </div>
          <div style="padding-right: 3%">
            <!-- <span
              style="font-size: 0.8rem; color: #2e2e2e"
              @click="toAli(homepagelist.id)"
              >查看全部</span
            >
            <van-icon name="arrow" size="11" color="#A6A4A4" /> -->
          </div>
        </van-col>
      </van-row>
      <div class="Keine" v-if="caseslist.length == 0">暂无案例!</div>
      <div
        v-for="(item, index) in caseslist.slice(0, 3)"
        :key="index"
        class="abcase abp"
        style="
          border-radius: 10px;
          height: 7rem;
          background: #ebecf0;
          margin-top: 10px;
        "
        @click="tocas(`${item.id}`)"
      >
        <div style="padding-left: 5%" class="abcasetext">
          <p>
            户型面积：<span>{{ item.houseType }}|{{ item.houseArea }}m²</span>
          </p>
          <p>
            装修报价：<span>{{ item.decorationPrice }}万</span>
          </p>
          <p>
            装修风格：<span>{{ item.decorationStyle }}</span>
          </p>
          <!-- <p>设计师：<span>蔡亮</span></p> -->
        </div>
        <div style="width: 40%">
          <p style="margin: 0">
            <img
              :src="item.picture"
              alt=""
              style="
                height: 7rem;
                width: 100%;
                border-radius: 10px;
                object-fit: cover;
              "
            />
          </p>
        </div>
      </div>
      <van-row style="margin-top: 15px">
        <van-col style="text-align: center; width: 100%">
          <div>
            <!-- <span style="margin-bottom: 10px">装修案例</span> -->
          </div>
          <div
            style="text-align: center; width: 100%"
            v-if="caseslist.length != 0"
          >
            <span
              style="font-size: 0.8rem; color: #2e2e2e; display: inline-block"
              @click="toAli(homepagelist.id)"
              >查看全部</span
            >
            <van-icon name="arrow" size="11" color="#A6A4A4" />
          </div>
        </van-col>
      </van-row>
    </div>

    <!--设计团队模块 -->
    <!-- <div ref="bigox" style="width: 100%; margin: 1rem 0; background: white">
      <van-row class="titall">
        <van-col class="titlering">
          <div>
            <span style="margin-bottom: 10px">我的团队 </span>
          </div>
          <div style="padding-right: 3%">
            <span
              style="font-size: 0.8rem; color: #2e2e2e"
              @click="$router.push({ path: '/renovation/design' })"
              >查看全部</span
            >
            <van-icon name="arrow" size="11" color="#A6A4A4" />
          </div>
        </van-col>
      </van-row>

      <div class="sroldiv" style="overflow-x: scroll; display: flex" ref="one">

        <van-row class="engineering_z" style="" ref="two">

          <van-row
            v-for="(value, index) in designlist"
            :key="index"
            class="engineering_content"
            @click="
              $router.push({
                path: '/renovation/designerdeta/' + Number(index + 1),
              })
            "
          >
         

            <van-col span="12" class="engineering_wenzi">
              <div
                class="engineering_content_pos"
                :style="{
                  backgroundImage:
                    value.imgUrl != ''
                      ? 'url(' + value.icon + ')'
                      : 'url(' + logo_default + ')',
                }"
              ></div>
         
              <div>
             
                <div class="title_zushou" style="text-align: center">
                  {{ value.name }}
                </div>
   
                <div class="detail_zushou" style="text-align: center">
                  从业{{ value.experience }}年
                </div>
              </div>
            </van-col>
          </van-row>
          <van-row
            v-for="(valu, idx) in experlist"
            :key="idx"
            class="engineering_content"
            @click="
              $router.push({ path: '/renovation/tructionteam/' + valu.id })
            "
          >


            <van-col span="12" class="engineering_wenzi">
              <div
                class="engineering_content_pos"
                :style="{
                  backgroundImage:
                    valu.imgUrl != ''
                      ? 'url(' + valu.icon + ')'
                      : 'url(' + logo_default + ')',
                }"
              ></div>
          
              <div>
     
                <div class="title_zushou" style="text-align: center">
                  {{ valu.name }}
     
                <div class="detail_zushou" style="text-align: center">
                  从业{{ valu.experience }}年
                </div>
              </div>
            </van-col>
          </van-row>
        </van-row>
      </div>
    </div> -->

    <!--施工团队模块 -->
    <!-- <div ref="bigox" style="width: 100%; margin: 1rem 0; background: white">
      <van-row class="titall">
        <van-col class="titlering">
          <div>
            <span style="margin-bottom: 10px">施工团队</span>
          </div>
          <div
            style="padding-right: 3%"
            @click="$router.push({ path: '/renovation/constr' })"
          >
            <span style="font-size: 0.8rem; color: #b6b6b6">查看全部</span>
            <van-icon name="arrow" size="11" color="#A6A4A4" />
          </div>
        </van-col>
      </van-row>

      <div class="sroldiv" style="overflow-x: scroll; display: flex" ref="one">
        <van-row class="engineering" style="" ref="two">
        
          <van-row
            v-for="(value, index) in experlist"
            :key="index"
            class="engineering_content"
            @click="
              $router.push({ path: '/renovation/tructionteam/' + value.id })
            "
          >
          

            <van-col span="12" class="engineering_wenzi">
              <div
                class="engineering_content_pos"
                :style="{
                  backgroundImage:
                    value.imgUrl != ''
                      ? 'url(' + value.icon + ')'
                      : 'url(' + logo_default + ')',
                }"
              ></div>

              <div>
           
                <div style="text-align: center" class="title_zushou">
                  {{ value.name }}
                </div>
              
                <div style="text-align: center" class="detail_zushou">
                  从业{{ value.experience }}年
                </div>
              </div>
            </van-col>
          </van-row>
        </van-row>
      </div>
    </div> -->
    <!--业主评价模块 -->
    <div ref="bigox" style="width: 100%; margin: 1rem 0; background: white">
      <van-row class="titall">
        <van-col class="titlering">
          <div>
            <span style="margin-bottom: 10px">业主评价</span>
          </div>
          <!-- <div style="padding-right: 3%" @click="toAllcome(homepagelist.id)">
            <span style="font-size: 0.8rem; color: #2e2e2e">查看全部</span>
            <van-icon name="arrow" size="11" color="#A6A4A4" />
          </div> -->
        </van-col>
      </van-row>
      <div class="Keine" v-if="oerlist.length == 0">暂无评价!</div>
      <div class="evaluate" v-for="(vlu, index) in oerlist" :key="index">
        <!-- 用户信息 -->
        <div class="evaluateone" style="margin-top: 10px">
          <div class="nextevaluateone">
            <div style="margin-left: 0.6rem; line-height: 35px; display: flex">
              <img
                :src="vlu.userIcon"
                alt=""
                style="height: 2rem; width: 2rem; border-radius: 50%"
              />
            </div>
            <div style="">
              <p
                style="
                  width: 50px;
                  line-height: 35px;
                  font-size: 15px;
                  margin-left: 11px;
                  letter-spacing: 3px;
                "
              >
                {{ vlu.username }}
              </p>
              <!-- <p>
                <van-icon name="star" color="#FC4614" /><van-icon
                  name="star"
                  color="#FC4614"
                /><van-icon name="star" color="#FC4614" /><van-icon
                  name="star"
                  color="#FC4614"
                />
              </p>
              <p style="width: 130%">
                <span class="bettery" style="font-size: 0.6rem; color: #5d5c61">
                  设计：<span>{{ vlu.designScore }}</span> &nbsp;施工：<span>{{
                    vlu.workScore
                  }}</span
                  >&nbsp;服务:
                  <span>{{ vlu.serviceScore }}</span>
                </span>
              </p> -->
            </div>
            <div
              style="
                line-height: 36px;
                color: #5d5c61;
                width: 63%;
                font-szie: 12px;
                text-align: right;
              "
            >
              <p>
                {{ String(vlu.createTime).substring(0, 4) }}年{{
                  String(vlu.createTime).substring(5, 7)
                }}月{{ String(vlu.createTime).substring(8, 10) }}日
              </p>
            </div>
          </div>
        </div>
        <!-- 评价内容 -->
        <div class="evaluatetwo" style="">
          <div style="height: auto; margin-left: 40px; font-size: 15px">
            {{ vlu.content }}
          </div>
          <div style="margin-left: 36px">
            <img
              @click="open(item)"
              :src="item"
              alt=""
              style=""
              v-for="(item, index) in oerlist[index].pictures.slice(0, 2)"
              :key="index"
            />
          </div>
          <!-- <div style="height: auto; color: #5d5c61; padding: 0 1rem">
            总体阶段
          </div> -->
        </div>
        <!-- 小dmo分割线 -->
        <van-divider
          :style="{
            margin: '0',
            color: 'rgba(187, 187, 187, 0.38)',
            borderColor: 'rgba(187, 187, 187, 0.38)',
            padding: '5px 16px 0px 16px',
          }"
        ></van-divider>
      </div>
      <van-row style="margin-top: 15px; padding-bottom: 10px">
        <van-col style="text-align: center; width: 100%">
          <div>
            <!-- <span style="margin-bottom: 10px">装修案例</span> -->
          </div>
          <div
            style="text-align: center; width: 100%"
            v-if="oerlist.length != 0"
          >
            <span
              style="font-size: 0.8rem; color: #2e2e2e; display: inline-block"
              @click="toAllcome(homepagelist.id)"
              >查看全部</span
            >
            <van-icon name="arrow" size="11" color="#A6A4A4" />
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 装修工地模块 -->
    <!-- <div
      style="
        width: 100%;
        background: white;
        margin-top: 1rem;
        padding-bottom: 2rem;
      "
    >
      <van-row class="titall">
        <van-col class="titlering">
          <div>
            <span style="margin-bottom: 10px">装修工地</span>
          </div>
          <div
            style="padding-right: 3%"
            @click="$router.push({ path: '/renovation/structure' })"
          >
            <span style="font-size: 0.8rem; color: #2e2e2e">查看全部</span>
            <van-icon name="arrow" size="11" color="#A6A4A4" />
          </div>
        </van-col>
      </van-row>

      <div
        v-for="(item, index) in frationlist.slice(0, 2)"
        :key="index"
        class="abcase abp"
        style="margin-bottom: 1rem; border-radius: 10px; height: 8rem"
        @click="$router.push('/renovation/construction')"
      >
        <div style="width: 40%">
          <p style="margin: 0">
            <img
              src="../../../assets/images/apply_bottom.jpg"
              alt=""
              style="height: 8rem; width: 100%; border-radius: 10px"
            />
          </p>
        </div>
        <div style="padding-left: 1%; width: 58%" class="abcasetext">
          <p style="font-size: 0.9rem; color: black; font-weight: 550">
            {{ item.name }}
          </p>
          <p>
            户型面积：<span>
              {{ item.decorationStyle }}|{{ item.houseArea }}m²</span
            >
          </p>
          <p>
            装修报价：<span> {{ item.decorationPrice }}</span>
          </p>
          <p style="width: 100%">
            装修工期：<span style="display: inline-block">
              {{ String(item.startTime).substring(0, 4) }}.{{
                String(item.startTime).substring(5, 7)
              }}.{{ String(item.startTime).substring(8, 10) }}.—{{
                String(item.endTime).substring(0, 4)
              }}.{{ String(item.endTime).substring(5, 7) }}.{{
                String(item.endTime).substring(8, 10)
              }}.</span
            >
          </p>
        </div>
      </div>
    </div> -->

    <!-- 页面最底部 -->

    <van-goods-action style="padding: 0.6rem 0">
      <van-goods-action-icon icon="phone-o" text="电话" @click="callphone()" />
      <van-goods-action-icon icon="chat-o" text="评论" @click="tocomt" />
      <!-- <van-goods-action-icon icon="comment-o" text="点评" /> -->

      <van-goods-action-button
        type="danger"
        text="免费为我报价"
        @click="offershow()"
      />
    </van-goods-action>

    <!-- 图片预览 -->

    <div
      v-show="luay"
      style="
        display: flex;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 11111;
        align-items: center;
      "
      @click="colse"
    >
      <img src="" alt="" style="width: 100%; height: auto" ref="opim" />
    </div>

    <!-- 接口用组件 -->
    <!-- <decorationlist v-on:asentlist="absentlist($event)"> </decorationlist> -->
  </div>
</template>

<script>
import {
  orelis,
  exper,
  design,
  oer,
  fration,
  getent,
  getWxConfig,
  code,
  deco,
  verificat,
  caselistly,
  stiler,
  byGroupId,
} from '@/api/api';
import wx from 'weixin-js-sdk';
import scrollFixed from '@/mixin/scroll-fixed';
import { getLocalStorage } from '@/utils/local-storage';
import decorationlist from '@/components/decorationlist';
import logo_default from '@/assets/images/logo.jpg';

import {
  List,
  Swipe,
  SwipeItem,
  Tabbar,
  TabbarItem,
  Image,
  Search,
  Toast,
  Card,
  Row,
  Col,
  Tag,
  Tab,
  Tabs,
  Divider,
  Panel,
  Grid,
  GridItem,
  SidebarItem,
  Sidebar,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
} from 'vant';

import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
export default {
  name: 'homepage',
  mixins: [scrollFixed],

  data() {
    return {
      eventBtn: true,
      luay: false,
      offshow: false,
      identifying: '',
      homepagelist: '',
      callpnone: '',
      titleClass: '',
      imgShow: true,
      textShow: false,
      categoryDataList: [],
      userId: getLocalStorage('userId').userId,
      nickName: getLocalStorage('nickName').nickName,
      activeKey: 0,
      merchantsUrl: '',
      logo_default: logo_default,
      caseslist: '',
      mobile: '',

      Interval: undefined,
      designlist: '',
      oerlist: '',
      lenpan: '',
      frationlist: '',
      homepiclist: '',
      shopInfo: {
        shopName: '',
        shopAddress: '',
        intro: '',
        mobile: '',
        shopPhotos: [],
      },
      experlist: '',
    };
  },

  created() {
    this.initViews();
    this.init();
  },
  /**
   * 监听路由是否从会员开通状态页面过来的
   */
  watch: {},
  methods: {
    // 解决被顶起事件
    onscoll() {
      window.scroll(0, 0);
    },
    // 预览开启
    open(item) {
      let opim = this.$refs.opim;
      opim.src = item;
      this.luay = true;
    },
    // 预览关闭
    colse() {
      this.luay = false;
    },
    // 公共接口组件
    // absentlist(list) {
    //   this.caseslist = list.examples;
    //   this.mobile = list.mobile;
    //   this.homepagelist = list;
    //   this.homepiclist = this.homepagelist.pictures;
    // },
    // 免费报价
    offershow() {
      this.identifying = '';
      let changsum = this.$refs.changsum;
      changsum.classList.remove('cahngesum');
      this.offshow = !this.offshow;
    },
    showfreey() {
      this.offshow = false;
      this.identifying = '';
    },
    tocomt() {
      this.$router.push({
        path: '/renovation/comment/' + this.$route.params.id,
      });
    },

    onchagn() {
      if (this.identifying != '' && this.callpnone != '') {
        let changsum = this.$refs.changsum;
        changsum.classList.add('cahngesum');
      } else {
        let changsum = this.$refs.changsum;
        changsum.classList.remove('cahngesum');
      }
    },
    // 立即预约
    sumitoff() {
      verificat({
        shopId: this.$route.params.id,
        code: this.identifying,
        phone: Number(this.callpnone),
        mobile: Number(this.callpnone),
        userId: Number(this.userId),
        userName: this.nickName,
      })
        .then((res) => {
          Toast('预约成功！');
          this.identifying = '';
          this.offshow = false;
        })
        .catch((res) => {
          Toast('验证码错误');
        });
    },
    // 发送验证码
    secode() {
      let rightPhone = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
      if (!rightPhone.test(this.callpnone)) {
        Toast('请输入正确的号码');
        return;
      } else {
        code({ phone: Number(this.callpnone) }).then((res) => {
          Toast('验证码发送成功');
          this.eventBtn = false;
          let cahngecode = this.$refs.change;
          cahngecode.classList.add('cahngecode');
          let count = 60;
          let timer = setInterval(() => {
            cahngecode.innerHTML = Number(count--) + '秒后获取';
            if (count == -1) {
              cahngecode.innerHTML = '获取验证码';
              cahngecode.classList.remove('cahngecode');
              clearInterval(timer);
              this.eventBtn = true;
            }
            // cahngecode.removeEventListener('click',secode, false);
          }, 1000);
        });
      }
    },
    // 打电话
    callphone() {
      window.location.href = 'tel://' + this.homepagelist.mobile;
    },

    redirectTo(link) {
      if (link == null || link == '' || link == undefined) {
        return;
      }
      if (link.indexOf('http') != -1) {
        window.location.href = link;
        return;
      }
      this.$router.push({
        path: link,
      });
    },
    // 保护
    initViews() {
      // 页面头部
      // getent({ id: Number(this.$route.params.id) }).then((res) => {});
      // 施工团队
      exper({}).then((res) => {
        this.experlist = res.data.data.list;
      });
      caselistly({ shopId: Number(this.$route.params.id) }).then((res) => {
        let zeh = res.data.data.list;
        stiler({}).then((res) => {
          let cc = new Map();
          let dd = res.data.data.list;
          dd.forEach((e) => {
            cc.set(e.id, e.name);
          });
          zeh.forEach((t) => {
            if (cc.get(t.decorationStyle)) {
              t.decorationStyle = cc.get(t.decorationStyle);
            }
          });
          byGroupId({ groupId: 'DECORATION_HOUSE' }).then((res) => {
            let gg = res.data.data.list;
            let jj = new Map();
            gg.forEach((e) => {
              jj.set(e.itemValue, e.itemName);
            });
            zeh.forEach((f) => {
              if (cc.get(f.houseType)) {
                f.houseType = cc.get(f.houseType);
              }
            });
          });

          this.caseslist = zeh;
        });
      });
      // 设计团队
      design({}).then((res) => {
        this.designlist = res.data.data.list;
      });
      // 用户评级
      orelis({
        shopId: Number(this.$route.params.id),
      }).then((res) => {
        this.oerlist = res.data.data.list.slice(0, 3);
        // console.log(res);
        for (let index in res.data.data.list) {
          this.lenpan = res.data.data.list[index].pictures.length;
        }
      });
      // 装修工地接口
      fration([Number(this.$route.params.id)]).then((res) => {
        this.frationlist = res.data.data.list;
      });

      // 保护
    },
    // 点击地图------弃用
    // ctomap(id) {
    //   this.$router.push({ path: '/renovation/profile/map/' + id });
    // },

    // 点击公司
    tocomp(id) {
      this.$router.push({ path: '/renovation/profile/' + id });
    },
    // 装修案例
    tocas(id) {
      this.$router.push({ path: '/renovation/casedetails/' + id });
    },
    // 评论列表
    toAllcome(id) {
      this.$router.push({ path: '/renovation/allcomm/' + id });
    },
    // 案例
    toAli(id) {
      this.$router.push({ path: '/renovation/casetudy/' + id });
    },

    // 导航模块
    init() {
      getWxConfig({
        url: location.href.split('#')[0],
      }).then((res) => {
        wx.config({
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false,
          // 必填，公众号的唯一标识
          appId: res.data.data.appId,
          // 必填，生成签名的时间戳
          timestamp: res.data.data.timestamp,
          // 必填，生成签名的随机串
          nonceStr: res.data.data.nonceStr,
          // 必填，签名，见附录1
          signature: res.data.data.signature,
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: ['checkJsApi', 'openLocation'],
        });
      });
      wx.error(function (res) {
        alert('出错了：' + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
      });
      wx.ready(function () {
        wx.checkJsApi({
          jsApiList: ['openLocation'],
          success: function (res) {
            //alert('成功了：' + res.errMsg);
          },
        });
      });
      getent({ id: Number(this.$route.params.id) }).then((res) => {
        this.shopInfo = res.data.data;
        // this.caseslist = res.data.data.examples;
        this.mobile = res.data.data.mobile;
        this.homepagelist = res.data.data;
        this.homepiclist = this.homepagelist.pictures;
      });
    },

    openBaiApp() {
      let latitude = parseFloat(this.shopInfo.longitude);
      let longitude = parseFloat(this.shopInfo.latitude);
      let name = this.shopInfo.name;
      let address = this.shopInfo.cityName;
      if (!(latitude && longitude)) {
        return;
      }
      wx.openLocation({
        latitude: parseFloat(latitude),
        // 纬度，浮点数，范围为90 ~ -90
        longitude: parseFloat(longitude),
        // 经度，浮点数，范围为180 ~ -180。
        name: name, // 位置名
        address: address, // 地址详情说明
        scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
        success: (res) => {
          // console.log(5555, res);
        },
        fail: (res) => {
          //console.log(res);
        },
      });
    },
  },
  // computed: {
  //   sideBarListWrap() {
  //     this.sideBarList.map((el) => {
  //       if (el.length >= 5) {
  //         :class="item.length>=5? '': wrpaList"
  //         var str2 = el.substring(3, this.name.length);
  //         var str1 = this.name.substring(0, 3);
  //         el = str1 + '<br>' + str2;
  //       }
  //     });
  //   },
  // },
  components: {
    BaiduMap,
    decorationlist,
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [Toast.name]: Toast,
    [Search.name]: Search,
    [List.name]: List,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Tag.name]: Tag,
    [Image.name]: Image,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Divider.name]: Divider,
    [Panel.name]: Panel,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton,
  },
};
</script>

<style lang="scss" scoped>
// 验证码样式更改
.cahngecode {
  background: #a7e4cd !important;
}
.cahngesum {
  background: #26c680 !important;
}
// 头部公司简介
.titlist {
  width: 90%;
  margin: auto;
  padding: 0.4rem 0;
  .better {
    padding: 0 2.5%;
    display: inline-block;
    position: absolute;
  }
}
.betterrow::after {
  content: '';
  font-weight: 600;
  width: 0.4rem;
  height: 0.4rem;
  border: 2px solid rgb(223, 219, 219);
  border-left: none;
  border-bottom: none;
  margin-top: 0.6rem;
  margin-right: 0.5rem;
  transform: rotate(45deg);
  // font-size:1rem;
  float: right;
  display: block;
}
.iconSty {
  margin: 0 !important;
  padding-left: 5px;
  background: #ffffff;
}

// 装修案例
.abcase {
  width: 92%;
  margin: auto;
  // height: auto;
  display: flex;

  // flex-flow排序方向
  flex-flow: row nowrap;
  //justify-content排序方式
  justify-content: space-between;
}
.abp {
  height: 8rem;
  .abcasetext {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: #898a8e;

    p {
      line-height: 2rem;
      // flex是flex-grow和flex-bases，flex-shrink的简写，用于分配剩余空间，忽略盒子内的长度（内容）
      flex: 1 1 auto;
      margin: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span {
      color: black;
    }
  }
}
.abcasetitle {
  p:nth-child(1) {
    font-size: 0.96rem;
    font-weight: 550;
  }
  p:nth-child(2) {
    line-height: 1.8rem;
    color: #b6b6b6;
    font-size: 0.6rem;
  }
}

// 设计团队模块

.designer {
  width: 77%;
  margin: auto;
  padding: 0.3rem 1%;
  color: #cab9b5;
  border-radius: 5px;
  font-size: 0.75rem;
  background: #161616;
  text-align: center;
}

// 用户评价
.evaluate {
  .evaluateone {
    .nextevaluateone {
      // padding: 0.5rem 0;
      display: flex;
      flex-flow: row nowrap;

      width: 100%;
      p {
        margin: 0;
      }
    }
  }
  .evaluatetwo {
    height: auto;
    width: 88%;
    padding-bottom: 0.6rem;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin: auto;
    div:nth-child(1) {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      // -webkit-line-clamp: (2);
    }
    div:nth-child(2) {
      display: flex;
      height: auto;
      padding: 0.5rem 0;
      // justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;
      // align-items: center;
      img {
        margin-left: 10px;
        height: 5.2rem;
        width: 5.2rem;
        border-radius: 10px;
      }
      // img:nth-child(2),
      // img:nth-child(3) {
      //   margin-left: 0.2rem;
      // }
    }
  }
}

// 无评价
.Keine {
  width: 100%;
  height: 2rem;
  text-align: center;
  color: rgb(153, 152, 152);
}
.evaluatepan {
  height: auto;
  width: 70%;
  padding-bottom: 1.1rem;
  // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: auto;
  div:nth-child(1) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: (2);
  }
  div:nth-child(2) {
    display: flex;
    height: auto;
    padding: 0.5rem 0;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    // align-items: center;
    img {
      height: 6.5rem;
      width: 6.5rem;
      border-radius: 10px;
    }
    // img:nth-child(2),
    // img:nth-child(3) {
    //   margin-left: 0.2rem;
    // }
  }
}

// img:nth-child(1) {
//   margin-left: 10px;
// }

// 免费为我报价
.offer {
  position: fixed;
  bottom: 0%;
  left: 0;
  right: 0;
  padding-bottom: 0rem;
  z-index: 30;
  ul {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    background: white;
    li:nth-child(1) {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      background: white;
      letter-spacing: 2px;
      padding: 0.7rem 0;
      font-size: 0.9rem;
      font-weight: 550;
      border-bottom: 1px solid #f3f3f3;
      p {
        border-radius: 20px;
      }
    }

    li:nth-child(2) {
      font-size: 0.8rem;
      padding-bottom: 0.5rem;
      p {
        text-align: left;
      }
      p:nth-child(1) {
        color: #dd633a;
        padding: 0.5rem 0;
      }
    }

    li:nth-child(3) {
      p {
        width: 100%;
        color: #838282;
        letter-spacing: 1px;
        padding: 0.3rem 0;
        font-size: 0.7rem;
      }
    }
    li:nth-child(4) {
      padding: 0.5rem 0;
      input {
        border: none;
        width: 65%;
        height: 2.5rem;
        padding-left: 0.5rem;
        background: #f4f7fc;
      }
      ::-webkit-input-placeholder {
        color: #b4b7be;
      }
    }
    li:nth-child(5) {
      padding: 0.5rem 0;
      input {
        border: none;
        width: 65%;
        height: 2.5rem;
        padding-left: 0.5rem;
        background: #f4f7fc;
      }
      ::-webkit-input-placeholder {
        color: #b4b7be;
      }
      p:nth-child(2) {
        background: #26c680;
      }
    }
    li:nth-child(6) {
      padding-top: 0.6rem;
      border-top: 1px solid #f3f3f3;
      P {
        width: 60%;
        padding: 0.5rem 0;
        color: white;
        font-size: 0.75rem;
        letter-spacing: 2px;
        background: #a7e4cd;
      }
    }
    li:nth-child(7) {
      padding: 1rem;

      p {
        width: 65%;
        margin: auto;
        text-align: center;
        display: flex;
        input {
          opacity: 0;
        }
        span {
          font-size: 0.65rem;
          display: inline-block;
          width: auto;
          height: 0.7rem;
        }
        span:nth-child(4) {
          color: #26c680;
        }
        label {
          margin-left: 5%;
          margin-top: 0.1rem;
          margin-right: 0.3rem;
          width: 0.7rem;
          height: 0.7rem;
          display: inline-block;

          border: 2px solid#26c680;

          border-radius: 50%;
        }
        label::after {
          margin-bottom: 0.5rem;
          margin-right: 0.5rem;
          opacity: 0;
          content: '';
          color: white;
          display: inline-block;
          border: 2px solid #fff;
          border-top: none;
          border-right: none;
          width: 0.4rem;
          height: 0.2rem;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
        }
        // 用加号使得label和input属性共通，只有label可以做到
        input[type='checkbox']:checked + label {
          background: #26c680;
        }
        input[type='checkbox']:checked + label:after {
          opacity: 1;
        }
      }
    }
    li {
      text-align: center;
      width: 100%;
      p {
        width: 90%;
        margin: auto;
        text-align: center;
      }
    }
  }
}

.engineering_content_pos {
  width: 50%;
  margin: auto;
  border-radius: 50%;
  padding-bottom: 50%;
  background-size: 100% 100%;
  position: relative;
  margin-top: 0.5rem;

  span {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 1.1rem;
    height: 1.1rem;
    font-size: 0.8rem;
    // opacity: 0.5;
    color: #fff;
    background-color: rgba(247, 123, 38, 0.79);
  }
}

.titall {
  width: 100%;
  .titlering {
    display: flex;
    width: 100%;
    height: 2.5rem;
    // border-bottom: 1px solid #69686831;
    justify-content: space-between;
    align-items: center;
    div:nth-child(1) {
      margin-left: 0.85rem;
      font-weight: 600;
      font-size: 0.9rem;
    }
  }
}

// 具体工程区

// 滚动条隐藏属性
.sroldiv::-webkit-scrollbar {
  opacity: 0.1;
}

/deep/.engineering_z {
  padding: 2%;
  padding-top: 1%;
  padding-bottom: 2%;
  display: flex;
  width: auto;
  // calc是长宽度自动计算属性，支持计算符号，但记得需要加空格
  // width: calc(300% - 2.75rem);

  .engineering {
    div:nth-child(1) {
      font-size: 0.9rem;
      margin-left: 0.5rem;
      font-weight: 700;
    }

    div:nth-child(2) {
      align-items: center;
      margin-right: 0.5rem;

      span:nth-child(1) {
        height: 1rem;
        line-height: 1rem;
        margin-right: 0.1rem;
        font-size: 0.7rem;
        color: #a6a4a4;
      }
    }
  }
  // 底部文字模块
  .title_zushou {
    width: 100%;
    font-size: 0.8rem;
    margin-top: 0.9rem;
    font-weight: 700;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .detail_zushou {
    width: 100%;
    margin: 0.4rem 0;
    font-size: 0.7rem;
    color: rgba(166, 164, 164, 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .engineering_content {
    // display: flex;
    float: left;
    // flex-direction: row;
    // margin-left:
    box-shadow: 0 0 10px rgba(90, 90, 90, 0.192);
    padding: 0.5rem 0.5rem;
    background-color: #fff;
    width: 8rem;
    margin-left: 0.5rem;
    border-radius: 10px;

    .engineering_wenzi {
      width: 100%;
    }
  }
}
/deep/.engineering {
  padding: 2%;
  padding-top: 1%;
  padding-bottom: 2%;
  display: flex;
  width: auto;
  // calc是长宽度自动计算属性，支持计算符号，但记得需要加空格
  // width: calc(300% - 2.75rem);

  .engineering {
    div:nth-child(1) {
      font-size: 0.9rem;
      margin-left: 0.5rem;
      font-weight: 700;
    }

    div:nth-child(2) {
      align-items: center;
      margin-right: 0.5rem;

      span:nth-child(1) {
        height: 1rem;
        line-height: 1rem;
        margin-right: 0.1rem;
        font-size: 0.7rem;
        color: #a6a4a4;
      }
    }
  }
  // 底部文字模块
  .title_zushou {
    width: 100%;
    font-size: 0.8rem;
    margin-top: 0.9rem;
    font-weight: 700;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .detail_zushou {
    width: 100%;
    margin: 0.4rem 0;
    font-size: 0.7rem;
    color: rgba(166, 164, 164, 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .engineering_content {
    // display: flex;
    float: left;
    // flex-direction: row;
    // margin-left:

    padding: 0.5rem 0rem;
    background-color: #fff;
    width: 7rem;
    border-radius: 10px;

    .engineering_wenzi {
      width: 100%;
    }
  }
}

.gengduo_se {
  justify-content: center;
  text-align: center;
  // display: flex;
  // align-items: center;
  font-size: 0.75rem;

  margin: 0.5rem auto;
  width: 60%;
  padding: 2% 1%;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  height: auto;
  background: #f94804;
}

.gengduo::after {
  // content: '';
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  color: white;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}

// 租售专区标题
.rentitle {
  margin-top: 1rem;
  width: 100%;
  font-size: 0.9rem;
  margin-left: 0.5rem;
  font-weight: 700;
}
.rentitle div::before {
  // display: inline-block;
  content: '▍';
  color: red;
  padding-right: 0.3rem;
}

/deep/.van-field__control[type='search'] {
  height: 1.1rem;
  line-height: 1.1rem;
  font-size: 14px;
}

.van-cell__value--alone {
  height: 1.1rem;
}

.clear {
  clear: both;
}

//banner下小标题导航
.little-navigate {
  font-size: 0.7rem;
  text-align: center;
  padding: 0 0 1rem 0;
  background-color: #fff;

  img {
    width: 3rem;
  }

  span {
    display: inline-block;
    width: 100%;
    //float: left;
    padding-top: 0.15rem;
  }
}

// 畅销榜
.sellwell {
  width: 100%;
  margin: 0.6rem 0;

  .left {
    position: relative;
    float: left;
    width: 30%;
    padding-bottom: 25.2%;
    background: #ee3f00;
    border-radius: 0.5rem;
    margin-left: 4%;

    .img {
      position: absolute;
      top: 3%;
      height: 94%;
      left: 2%;
      width: 96%;
      border-radius: 0.5rem;
      background-size: 100% 100%;
    }
  }

  .piece {
    float: left;
    width: 2%;
    padding-bottom: calc(25.2% - 0.95rem);
    background: #ee3f00;
    margin-top: 0.475rem;
  }

  .middle {
    float: left;
    width: 28%;
    padding-bottom: 25.2%;
    //background:#FF7441;
    border-radius: 0.5rem;
    position: relative;

    .top {
      font-size: 0.9rem;
      color: #fff;
      position: absolute;
      top: 1.2rem;
      font-weight: bold;
      left: calc(50% - 1.5em);
    }

    .bottom {
      font-size: 0.7rem;
      color: #101010;
      background: #fff;
      position: absolute;
      bottom: 1.2rem;
      left: calc(50% - 2em - 0.5rem);
      border-radius: 1rem;
      padding: 0 0.5rem;
    }
  }

  .right {
    position: relative;
    float: left;
    width: 30%;
    padding-bottom: 25.2%;
    background: #ee3f00;
    border-radius: 0.5rem;

    .img {
      position: absolute;
      top: 3%;
      height: 94%;
      left: 2%;
      width: 96%;
      border-radius: 0.5rem;
      background-size: 100% 100%;
    }
  }
}

//信息中心
.info-center {
  border-radius: 0.5rem;
  background-color: #fff;
  margin: 0 0.75rem;
  padding: 0.5rem 0 1rem 0;

  .top {
    .used {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          font-weight: bold;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          font-size: 0.6rem;
          border: 1px solid #ff2b21;
          border-radius: 0.7rem;
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0;

          .left {
            padding: 0 0.25rem;
            height: calc(1rem - 0.1rem);
            line-height: calc(1rem - 0.1rem);
            display: inline-block;
            background-color: #ff2b21;
            color: #fff;
            border-radius: 0.7rem;
            text-align: center;
            padding: 1px 0.3rem;
          }

          .right {
            text-align: center;
            color: #ff2b21;
            font-weight: 400;
          }
        }
      }

      .content {
        text-align: center;
        margin-top: calc(0.6rem + 0.15rem);

        .img {
          background-size: 100% 100%;
          width: 96%;
          padding-bottom: 96%;
          margin: 0 auto;
        }

        span {
          display: inline-block;
          width: 100%;
          //float: left;
          font-size: 0.6rem;
        }

        .price {
          margin-top: 0.1rem;
          font-weight: bold;
          color: #000;
        }

        .srcPrice {
          margin-top: 1px;
          font-size: 0.5rem;
          color: #9f9f9d;
          text-decoration: line-through;
        }
      }
    }

    .rent {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #92f396;
          border-radius: 0.7rem;
          text-align: center;

          .word {
            background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .arrow {
            color: #44cbec;
          }
        }
      }

      .titletwo {
        background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }

  .middle {
    margin-top: 1.4rem;

    .project {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #f46c25;
          border-radius: 0.7rem;
          text-align: center;
          color: #f46c25;
        }
      }

      .titletwo {
        color: #f46c25;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .new {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
          font-weight: bold;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          color: #f84c3f;
          border: 1px solid #fb43b4;
          border-radius: 0.7rem;
          text-align: center;

          span {
            background-image: -webkit-linear-gradient(left, #fb43b4, #f84c3f);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .second_title {
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;

        .main {
          background-image: -webkit-linear-gradient(left, #4c23fb, #639df4);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .more {
          display: inline-block;
          background-image: -webkit-linear-gradient(left, #ff3da3, #f84c3f);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }

  .bottom {
    margin-top: 1.4rem;

    .workers {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          color: #7839f2;
          border: 1px solid #7839f2;
          border-radius: 0.7rem;
          text-align: center;
        }
      }

      .titletwo {
        color: #7839f2;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .hot {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
          font-weight: bold;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #4c86ea;
          color: #1821cd;
          border-radius: 0.7rem;
          text-align: center;

          span {
            background-image: -webkit-linear-gradient(left, #4c86ea, #1821cd);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .second_title {
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;

        .main {
          background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .more {
          background-image: -webkit-linear-gradient(
            left,
            #ff3da3,
            #ff3da3,
            #ff3da3,
            #f84c3f
          );
          background-clip: text;
          -webkit-text-fill-color: transparent;
          display: inline-block;
        }
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }
}

.hot_cont_top {
  display: flex;
  align-items: center;
  width: 5rem;
  height: 3.5rem;

  img {
    width: 100%;
  }

  span {
    font-size: 0.8rem;
    font-weight: 700;
  }
}

.hot_cont {
  display: flex;
  width: 100%;
  margin-bottom: 1.25rem;

  .hot_cont_rig {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.7rem;

    .cont1 {
      font-weight: 700;
      font-size: 0.75rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .cont2 {
      font-size: 0.6rem;
      color: rgba(166, 164, 164, 1);
      margin-top: 0.15rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .cont3 {
      // margin-top: 7px;
      span {
        color: rgba(16, 16, 16, 1);

        .van-tag:nth-of-type(n + 1) {
          margin: 0.35rem 0.4rem 0 0;
        }
      }
    }

    .cont4 {
      margin-top: 0.2rem;
      font-size: 0.8rem;
      font-weight: 700;
      color: rgba(247, 7, 7, 1);
    }

    .cont5 {
      display: flex;
      align-items: center;
      margin-top: 1px;
      font-size: 0.8rem;
      font-weight: 700;

      img {
        margin-left: 0.3rem;
        width: 2.4rem;
        height: 0.8rem;
      }
    }
  }
}

.van-sidebar {
  width: 100%;
  height: 100%;
  background-color: #efeff0;
}

.van-image {
  vertical-align: bottom;
}

/deep/ .van-sidebar-item {
  display: block;
  box-sizing: border-box;
  padding: 1.75rem 0 1.75rem 0px;
  // height: 100%;
  overflow: hidden;
  color: #323233;
  font-size: 0.7rem;
  word-wrap: break-word;
  background-color: #efeff0;
  border-left: 0px solid transparent;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}

/deep/ .van-sidebar-item__text {
  width: 100%;
  padding: 0 0.15rem;
  // width: calc(100% - 16px);
}

.van-sidebar-item--select {
  display: flex;
  align-items: center;
  // padding: 0 0 0 16px !important;
  word-wrap: break-word;
  height: 3.5rem;
  color: #323233;
  font-weight: 700;
  background-color: #fff;
  text-align: center;
}

/deep/ .van-list__finished-text {
  height: 1px;
  margin: 1rem 3.5rem 1rem 3.5rem;
  border: 0.02px solid #e8e8e8;
}

.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0.25rem 10px;
  background: #ffffff;
}

.banner {
  text-align: center;
}

.banner .topback {
  // background: #ee3f00;
  padding-bottom: 20%;
  width: 100%;
}

.banner .bottomback {
  padding-bottom: 22%;
  width: 100%;
}

.banner img {
  position: absolute;
  top: 0;
  left: 0.01%;
  width: 100%;
  // border-radius: 0.5rem;
}

/deep/.van-swipe__indicators {
  bottom: 11%;
}

/deep/ .goodscategory {
  margin: 0 0.75rem;

  .goods_name {
    padding-left: 0.3rem;
    font-size: 0.65rem;
    height: 1.25rem;
    line-height: 1.5rem;
    font-weight: bold;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    position: relative;
    color: #323233;
  }

  .goods_price {
    font-weight: bold;
    padding-left: 0.3rem;
    display: inline-block;
    color: #000;
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: left;
  }

  .get_price {
    color: red;
    padding: 0 0.2rem;
    border: 0.2px solid red;
    border-radius: 0.15rem;
    font-size: 0.5rem;
    display: inline-block;
    margin-left: 0.2rem;
    transform: scale(0.8);
    transform-origin: -0.5rem -0.15rem;
  }

  .couter_price {
    display: inline-block;
    font-size: 0.6rem;
    color: #999;
    transform: scale(0.8);
    transform-origin: 0.5rem -1.25rem;
    padding-left: 0.4rem;
    text-decoration: line-through;
  }

  .card:nth-child(odd) {
    padding: 0.3rem 0.3rem 0.3rem 0px !important;
  }

  .card:nth-child(even) {
    padding: 0.3rem 0px 0.3rem 0.3rem !important;
  }

  .goods:nth-child(odd) {
    padding: 0.3rem 0.3rem 0.3rem 0px !important;
  }

  .goods:nth-child(even) {
    padding: 0.3rem 0px 0.3rem 0.3rem !important;
  }

  .goods:nth-child(odd) .box_shadow {
    box-shadow: 0.1rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .goods:nth-child(even) .box_shadow {
    box-shadow: -0.1rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .goods .box_shadow {
    box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .van-tab {
    padding: 0;
  }

  .van-tabs__nav {
    background-color: transparent;
  }

  .van-tabs__content {
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .van-tabs--card > .van-tabs__wrap {
    border-radius: 0.5rem 0.5rem 0 0;
    height: 3.25rem;
    padding: 0.5rem 0 0.5rem 0;
    background-color: #fff;
  }

  .van-tabs__nav--card {
    margin: 0;
    height: 2.25rem;
    border: 0;
    padding: 0 0.25rem;
  }

  .van-tabs__nav--card .van-tab {
    border-right: 0;
    line-height: 1.1rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
  }

  .van-tabs__nav--card .van-tab.van-tab--active {
    color: #fd0404 !important;
    background-color: transparent !important;
  }

  .van-tabs__nav--card .van-tab {
    color: #101010;
    background-color: transparent !important;
  }

  .van-tabs__nav--card .van-tab.van-tab--active .second_title {
    font-size: 0.585rem;
    background-color: #ff5b5b;
    color: #fff !important;
    font-weight: bold;
    border-radius: 1.25rem;
    padding: 0 0.3rem;
    height: 1rem;
    line-height: 1.1rem;
  }

  .van-tabs__nav--card .van-tab .second_title {
    color: #9f9d9d;
    font-size: 0.585rem;
    display: inline-block;
  }
}

.van-search__content {
  border-radius: 0px !important;
  height: 1.5rem;
  background: #dddddd !important;
}

.van-sidebar-item--select::before {
  background-color: #fff;
}

.van-list {
  overflow: scroll;
  height: calc(100vh - 3.5rem);
}

.van-list::-webkit-scrollbar {
  display: none;
}

.side_scroll {
  overflow: scroll;
  height: 100vh;
}

.side_scroll::-webkit-scrollbar {
  display: none;
}

/*改变img为了暂时区分 */
.merchant-one {
  filter: hue-rotate(90deg);
}

.merchant-two {
  filter: invert(100%);
}
</style>
